<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>弹性小球</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		body {
			height: 100%;
			background: #fff;
		}

		.wrap {
			width: 100px;
			background: lightblue;
			position: absolute;
			bottom: 100px;
			margin-left: -50px;
		}

		.red {
			left: 25%;
		}

		.green {
			left: 50%;
		}

		.blue {
			left: 75%;
		}

		.ball {
			width: 50px;
			height: 50px;
			border-radius: 100%;
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;

			animation: ballMove 300ms infinite alternate;
		}

		.red .ball {
			background: linear-gradient(#e55, #b00);
		}

		.green .ball {
			background: linear-gradient(#5d5, #0a0);
		}

		.blue .ball {
			background: linear-gradient(#59e, #04b);
		}

		.shadow {
			width: 75px;
			height: 25px;
			background: #000;
			border-radius: 100%;
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: -90px;

			animation: shadowMove 300ms infinite alternate;
		}

		.red .ball,
		.red .shadow {
			animation-delay: -200ms;
		}

		.green .ball,
		.green .shadow {
			animation-delay: -100ms;
		}

		.blue .ball,
		.blue .shadow {
			animation-delay: 0ms;
		}

		@keyframes ballMove {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(-150px);
			}
		}

		@keyframes shadowMove {
			0% {
				opacity: 0.2;
				transform: scale(0.75);
			}

			100% {
				opacity: 0.05;
				transform: scale(1);
			}
		}
	</style>
	<body>

		<div class="wrap red">
			<div class="ball"></div>
			<div class="shadow"></div>
		</div>
		<div class="wrap green">
			<div class="ball"></div>
			<div class="shadow"></div>
		</div>
		<div class="wrap blue">
			<div class="ball"></div>
			<div class="shadow"></div>
		</div>

	</body>
</html>
